/*
 * @Description: 超管后台首页
 * @Author: kanglin
 * @Date: 2018-10-29 09:27:32
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .v-com-admin-home{
        background: #f0f0f0;
		// margin: 0 -20px;
		overflow-y: auto;
		overflow-x: hidden;
        .device, .single{
            margin-top: 20px;
		}
		.v-com-admin-home__wrap{
			padding: 0 7px;
		}
    }
</style>

<template >
	<div
		class="v-com-admin-home">
		<div class="v-com-admin-home__wrap">
			<Row
				:gutter="20">
				<i-col span="15">
					<population-statistics
						:user-total="user_total"
						:genders="genders"
						:age-groups="age_groups"
						:regions="regions"
					/>
				</i-col>
				<i-col span="9">
					<testing-statistics
						:image-testing-data="image_testing_data"
						:touch-testing-data="touch_testing_data"/>
				</i-col>
			</Row>

			<Row class="single">
				<product-statistic
					ref="prodcut"
					:products="products"/>
			</Row>

			<Row class="device">
				<device-statistics
					:default-model="default_model_id"
					:models="models"
					:loading="is_loading_device_data"
					:toatal="device_data.total"
					:per_page="device_data.per_page"
					:current_page="device_data.current_page"
					:devices="device_data.data"
					@page-change="handleDevicePageChange"
				/>
			</Row>


			<Row class="device">
				<customer-statistics
					:loading="is_loading_customer_data"
					:customer-count="customer_count"
					:device-count="device_count"
					:page-total="customers_data.total"
					:per-page="customers_data.per_page"
					:current-page="customers_data.current_page"
					:customers="customers_data.data"
					@page-change="handleCustomerPageChange"/>
			</Row>
		</div>
	</div>
</template>

<script>
import { mapMutations } from 'vuex';
import API_LIST from 'src/API_LIST';
import productStatistic from './product-statistic';
import deviceStatistics from './device-statistics';
import customerStatistics from './customer-statistics';
import testingStatistics from './testing-statistics';
import populationStatistics from './population-statistics/views';

export default {
	name: 'AdminHome',
	components: {
		productStatistic,
		deviceStatistics,
		customerStatistics,
		testingStatistics,
		populationStatistics,
	},
	data() {
		return {
			genders: [],
			age_groups: [],
			regions: [],
			touch_testing_data: [],
			image_testing_data: { items: [], all_count: 0 },
			products: [],
			user_total: 0,
			device_data: { // 设备数据
				current_page: 1,
				per_page: 15,
				data: [],
				total: 0,
			},
			customer_count: 0,
			device_count: 0,
			customers_data: { // 客户数据
				current_page: 1,
				per_page: 15,
				data: [],
				total: 0,
			},
			is_loading_customer_data: false,
			is_loading_device_data: false,

			default_model_id: '', // 设备列表查询参数
			models: [],
		};
	},
	created() {
		this.initPageData();
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),
		/**
         * 请求用户统计数据
         */
		fetchUserStatisticsData() {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_USER)
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.age_groups = data.user_profiles.born_range || [];
					this.genders = data.user_profiles.sex_group || [];
					this.regions = data.user_profiles.province_group || [];
					this.user_total = data.total_count || [];
				});
		},

		/**
         * 请求用户测肤统计数据
         */
		fetchTestingStatisticsData() {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_TESTING)
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.touch_testing_data = data.skin_proportion.hm_proportion || [];
					this.image_testing_data = data.skin_proportion.wax_proportion || null;
				});
		},

		/**
         * 请求用户测肤统计数据
         */
		fetchProductsStatisticsData() {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_PRODUCT)
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.products = data.asset_try_on_count.product_try_on_count || [];
				});
		},


		/**
         * 请求用户测肤统计数据
         */
		fetchDeviceStatisticsData(params = {}) {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_DEVICE, {
				params,
			})
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.device_data.total = data.device_account_try_on_count.total;
					this.device_data.per_page = parseInt(data.device_account_try_on_count.per_page, 10) || 0;
					this.device_data.current_page = data.device_account_try_on_count.current_page;
					this.device_data.data = data.device_account_try_on_count.data || [];
					// return data.device_account_try_on_count;
				});
		},

		/**
         * 请求用户测肤统计数据
         */
		fetchCustomerStatisticsData(params = {}) {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_CUSTOMER, {
				params,
			})
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.customers = data.customers;
					this.customer_count = data.customer_count;
					this.device_count = data.device_count;
					this.customers_data.total = data.customers.total;
					this.customers_data.per_page = parseInt(data.customers.per_page, 10) || 0;
					this.customers_data.current_page = data.customers.current_page;
					this.customers_data.data = data.customers.data || [];
				});
		},

		/**
         * 请求用户测肤统计数据
         */
		fetchModels() {
			return this.$http.get(API_LIST.ADMIN_STATISTIC_CREATE)
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);
					this.models = data.device_try_on_count;
					// 设置默认选择的设备
					if (this.models[0]) {
						this.default_model_id = this.models[0].device_id;
					} else {
						throw new Error('设备不能为空');
					}
				});
		},

		initPageData() {
			// this.showSpin(this.$t('staff.please_wait'));
			this.is_loading_customer_data = true;
			this.is_loading_device_data = true;
			this.fetchUserStatisticsData()
				.then(this.fetchTestingStatisticsData)
				.then(this.fetchProductsStatisticsData)
				.then(this.fetchModels)
				.then(() => this.fetchDeviceStatisticsData({ device_id: this.default_model_id }))
				.then(this.fetchCustomerStatisticsData)
				.catch((error) => {
					this.$Message.error(error.message);
				})
				.then(() => {
					this.is_loading_customer_data = false;
					this.is_loading_device_data = false;
					// this.closeSpin();
				});
		},

		/**
		 * 处理客户分页改变
		 */
		handleCustomerPageChange(query) {
			this.is_loading_customer_data = true;
			this.fetchCustomerStatisticsData(query)
				.catch((error) => {
					this.$Message.error(error.message);
				})
				.then(() => {
					this.is_loading_customer_data = false;
				});
		},

		/**
		 * 处理设备数据改变
		 */
		handleDevicePageChange(query) {
			this.is_loading_device_data = true;
			this.fetchDeviceStatisticsData(query)
				.catch((error) => {
					this.$Message.error(error.message);
				})
				.then(() => {
					this.is_loading_device_data = false;
				});
		},
	},
};
</script>
